<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<#include "head.ftl" />
</head>
<body>
	<div class="body-box">
		<div class="rhead">
			<div class="rpos">当前位置: 菜谱 - 编辑</div>
			<form class="ropt">
				<input type="button" value="返回"
					onclick="location.href='${st.domain}/cook/list'" />
			</form>
			<div class="clear"></div>
		</div>
		<form id="CookForm">
			<table width="100%" class="pn-ftable" cellpadding="2" cellspacing="1"
				border="0">
				<tr>
					<td width="10%" class="pn-flabel pn-flabel-h"><span
						class="pn-frequired">*</span>菜谱名称:</td>
					<td colspan="1" class="pn-fcontent"><input
						type="text" value="${cook.name}" name="name" class="required"
						size="25" maxlength="150" />
					</td>
				</tr>
				<tr>
					<td width="10%" class="pn-flabel pn-flabel-h"><span
						class="pn-frequired">*</span>关键字:</td>
					<td colspan="1" class="pn-fcontent"><input
						type="text" value="${cook.keywords}" name="keywords" class="required"
						size="25" maxlength="50" />&nbsp;<span style="color:#999">多个关键字请用逗号(,)隔开</span>
					</td>
				</tr>
				<tr>
					<td class="pn-flabel pn-flabel-h"><span
						class="pn-frequired">*</span>用餐时间:
					<input type="hidden" id="timeId" name="categoryByTimeId.catId" value="${cook.categoryByTimeId.catId}">
					</td>
					<td colspan="1" class="pn-fcontent" id="catSelectByTimeId"></td>
				</tr>
				<tr>
					<td class="pn-flabel pn-flabel-h"><span
						class="pn-frequired">*</span>菜品:
					<input type="hidden" id="typeId" name="categoryByTypeId.catId" value="${cook.categoryByTypeId.catId}">
					</td>
					<td colspan="1" class="pn-fcontent" id="catSelectByTypeId"></td>
				</tr>
				<tr>
					<td class="pn-flabel pn-flabel-h"><span
						class="pn-frequired">*</span>菜系:
					<input type="hidden" id="styleId" name="categoryByStyleId.catId" value="${cook.categoryByStyleId.catId}">
					</td>
					<td colspan="1" class="pn-fcontent" id="catSelectByStyleId"></td>
				</tr>
				<tr>
					<td class="pn-flabel pn-flabel-h"><span
						class="pn-frequired">*</span>功效介绍:</td>
					<td colspan="1" class="pn-fcontent"><textarea
							cols="40" rows="4" name="summary" maxlength="500">${cook.summary}</textarea>
					</td>
				</tr>
				<tr>
					<td class="pn-flabel pn-flabel-h"><span
						class="pn-frequired">*</span>食材:</td>
					<td colspan="1" class="pn-fcontent"><br/>
					   <div><span>主料:</span></div>
						  <div id="c_ingredient">
						  <#list materialList as material>
						  <#if material.type = 0> 
						   <div class="material">
						 	 <input type="text" name="name" value="${material.name}"/>&nbsp;<input type="text" name="amount" value="${material.amount}"/>&nbsp;<a href="javascript:;" style="color:red;" onclick="delMaterial(this);">删除</a>
						     <input type="hidden" name="type" value="${material.type}"/>
						   </div>&nbsp;
						   </#if>
						   </#list>
						   <#if !(cook??) >
						   <div class="material">
						 	 <input type="text" name="name" value="" placeholder="如：五花肉"/>&nbsp;<input type="text" name="amount" value="" placeholder="如：250g"/>&nbsp;<a href="javascript:;" style="color:red;" onclick="delMaterial(this);">删除</a>
						     <input type="hidden" name="type" value="0"/>
						   </div>&nbsp;
						   </#if>
						  </div>
						 <div style="margin-left:270px"><a href="javascript:;" style="color:blue" onclick="addMaterial(0);">增加一行主料</a></div><br/>
					   <div><span>辅料:</span></div>
						  <div id="c_accessory"> 
						  <#list materialList as material>
						  <#if material.type = 1> 
						   <div class="material">
						 	 <input type="text" name="name" value="${material.name}"/>&nbsp;<input type="text" name="amount" value="${material.amount}"/>&nbsp;<a href="javascript:;" style="color:red;" onclick="delMaterial(this);">删除</a>
						     <input type="hidden" name="type" value="${material.type}"/>
						   </div>&nbsp;
						   </#if>
						   </#list>
						   <#if !(cook??) >
						   <div class="material">
						 	 <input type="text" name="name" value="" placeholder="如：食用油"/>&nbsp;<input type="text" name="amount" value="" placeholder="如：适量"/>&nbsp;<a href="javascript:;" style="color:red;" onclick="delMaterial(this);">删除</a>
						     <input type="hidden" name="type" value="1"/>
						   </div>&nbsp;
						   </#if>
						  </div>
						  <div style="margin-left:270px"><a href="javascript:;" style="color:blue" onclick="addMaterial(1);">增加一行辅料</a></div>
					</td>
				</tr>
				<tr>
					<td class="pn-flabel pn-flabel-h"><span
						class="pn-frequired">*</span>制作方法:</td>
					<td colspan="2" class="pn-fcontent">
					<textarea name="creation">${cook.creation}</textarea></td>
				</tr>
				<tr>
					<td width="10%" class="pn-flabel pn-flabel-h"><span
						class="pn-frequired">*</span>成品图片:</td>
					<td colspan="1" width="30%" class="pn-fcontent"><input
						type="text" id="pic" value="${cook.pic}" name="pic"
						class="required" style="width:250px;"/><br><br>
						<img id="imgPrev" src="${cook.pic}" class="atta thumbImage">
						<input type="button" id="picFileBt" value="选择图片">
					</td>
				</tr>
				<tr>
					<td class="pn-flabel pn-flabel-h">小贴士:</td>
					<td colspan="1" class="pn-fcontent"><textarea
							cols="40" rows="4" name="tip" maxlength="300">${cook.tip}</textarea>
					</td>
				</tr>
				
				<tr>
					<td colspan="4" class="pn-fbutton">
						<input type="hidden" name="cookId" value="${cook.cookId}"/>
						<input type="hidden" name="id" value="1" /> <input type="button" value="提交" id="cookBt"/> &nbsp; 
						<input type="reset" value="重置" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	<script>
	// 编辑菜谱请求路径
	var addOrEditDoPath = g_domain + "/cook/addOrEditDo/json";
	var $CookForm = $("#CookForm");
	
	$("img.atta").each(function(index, el) {
		var src = $(el).attr("src");
		if (src.indexOf("http") == -1) {
			$(el).attr("src", g_domain  + src);
		}
		
	});
	
	$("#pic").keyup(function() {
		if ($(this).val().indexOf("http") == -1) {
			$("#imgPrev").attr("src", g_domain + $(this).val());
		}
	});
	
	//用餐时间分类下拉列表
	var timeId = $("#timeId").val();
	$("#catSelectByTimeId").categoryComboBox({
		value: timeId?timeId:203,
		isParentValue: timeId?false:true,
		isLoadParent: false,
		nullText: "-时间分类-",
		onSelect: function(deep, category) {
			$("#timeId").val(category?category.catId:"");
		}
	});
	
	//菜品下拉列表
	var typeId = $("#typeId").val();
	$("#catSelectByTypeId").categoryComboBox({
		value: typeId?typeId:204,
		isParentValue: typeId?false:true,
		isLoadParent: false,
		nullText: "-菜品分类-",
		onSelect: function(deep, category) {
			$("#typeId").val(category?category.catId:"");
		}
	});
	
	// 菜系下拉列表
	var styleId = $("#styleId").val();
	$("#catSelectByStyleId").categoryComboBox({
		value: styleId?styleId:205,
		isParentValue: styleId?false:true,
		isLoadParent: false,
		nullText: "-菜系分类-",
		onSelect: function(deep, category) {
			$("#styleId").val(category?category.catId:"");
		}
	});
	
	var finder = new CKFinder();
	finder.resourceType = 'Images';
	finder.selectActionData = "container";
	finder.selectActionFunction = function(fileUrl, data) {
		$("#pic").val(fileUrl);
		$("#imgPrev").attr("src",g_domain  + fileUrl);
		
	};
	
	// 选择图片
	$("#picFileBt").click(function() {
		finder.popup();
	});
	
	/* 编辑器 */
	
	// 指定编辑的显示高度
	CKEDITOR.config.height=450;
	// 初始化页面上的编辑器
	var editor = CKEDITOR.replace("creation");
	// 编辑器绑定CKFinder
	CKFinder.setupCKEditor( editor, { basePath : g_resDomain+'/common/module/ckfinder_2.3.1/', rememberLastFolder : true } ) ;
	
	// 增加一行食材
	function addMaterial(type){
		if (type == 0) {
			// 主料
			$("#c_ingredient").append("<div class='material'><input type='text' name='name' placeholder='如：五花肉'/>&nbsp;<input type='text' name='amount' placeholder='如：250g'/>&nbsp;<a href='javascript:;' style='color:red;' onclick='delMaterial(this);'>删除</a><input type='hidden' name='type' value='" + type + "'/></div>&nbsp;");
		} else if (type == 1) {
			// 辅料
			$("#c_accessory").append("<div class='material'><input type='text' name='name' placeholder='如：食用油'/>&nbsp;<input type='text' name='amount' placeholder='如：适量'/>&nbsp;<a href='javascript:;' style='color:red;' onclick='delMaterial(this);'>删除</a><input type='hidden' name='type' value='" + type + "'/></div>&nbsp;");
		}
	}
	
	// 删除一行食材
	function delMaterial(event){
		$(event).parent().remove();
	}
	
	// 事件：提交菜谱
	$("#cookBt").click(function(){
		$(".material").each(function(i, el) {
			$(this).find("input").each(function(){
				$(this).attr("name","mats[" + i + "]." + $(this).attr("name"));
			});
		});
		
		editor.updateElement();
		$.post(addOrEditDoPath, $CookForm.serialize(), function(data){
			if(data.status === 0){
				alert("保存成功!");
				location.href = g_domain + "/cook/list";
			} else {
				alert(data.message);
			}
		}, "json");
	});
	
</script>
</body>
</html>